import React from 'react';
import _ from 'lodash';
import classNames from 'classnames';

const ConfirmButton = (props) => {
  const myProps = _.omit(props, ['text', 'children']);
  return  (
    <button 
      type="button" 
      className="btn btn-primary confirm" 
      data-callback={props.onConfirm}
      {...myProps}
    >{props.text}{props.children}</button>
  )
}

const CancelButton = (props) => {
  const myProps = _.omit(props, ['text', 'children']);
  return (
    <button 
      type="button" 
      className="btn btn-primary btn-inverse"
      data-callback={props.onCancel}
      data-dismiss="modal"
      {...myProps}
    >{props.text}{props.children}</button>
  )
}

const Modal = (props) => {
  const { title, id ="myModal", cancelId, confirmId, confirmText, cancelText, cancelCallback, confirmCallback, size=''} = props;
  const modalSize = {
    'modal-sm': size === 'sm',
    'modal-lg': size === 'lg',
    'modal-xl': size === 'xl',
  }
  return (
    <div 
      className="modal fade" 
      id={id}
      tabIndex="-1"
      role="dialog" 
      aria-labelledby="myModalLabel"
    >
      <div className={classNames("modal-dialog", modalSize)} role="document">
        <div className="modal-content">
          <div className="modal-header">
            <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 className="modal-title" id="myModalLabel">{title}</h4>
          </div>
          <div className="modal-body">
            {props.children}
          </div>
          <div className="modal-footer">
            <CancelButton text={cancelText} id={cancelId} onClick={cancelCallback}/>
            <ConfirmButton text={confirmText} id={confirmId} onClick={confirmCallback}/>
          </div>
        </div>
      </div>
    </div>
  )
};

export default Modal